<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../assets/flexible/flexible.debug.js"></script>

    <title>特价</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/特价.css">
    <link rel="stylesheet" href="../assets/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="../font/iconfont.css">
</head>

<body>
    <div class="nav">
        <img src="https://fuss10.elemecdn.com/6/d5/de7613f554b5db1380f266097504bjpeg.jpeg?imageMogr/format/webp/thumbnail/!750x350r/gravity/Center/crop/750x350/" alt="">
    </div>
    <nav class="swiper-container tab-nav">
        <div class="swiper-wrapper">
            <div class="swiper-slide quanbu"><span>全部</span></div>
            <div class="swiper-slide dapai"><span>大牌特惠</span></div>
            <div class="swiper-slide xiawu"><span>下午茶不贵</span></div>
            <div class="swiper-slide shang"><span>商超百货</span></div>
            <div class="swiper-slide shui"><span>水果生鲜</span></div>
            <div class="swiper-slide xian"><span>鲜花蛋糕</span></div>
            <!-- <div class="swiper-slide bord">其他</div> -->
        </div>
    </nav>
    <main class="main">
        <div class="swiper-container tab-cont">
            <div class="swiper-wrapper">
                <div class="swiper-slide quanbu box">

                    <script type="text/html" id="template">
                        {{each str v}}

                        <div class="ulty">


                            <div class="list">
                                <p class="img1"> <img src=" {{v.image}}" alt=""> </p>
                                <p class="h21">{{v.hh}}</p>
                                <p class="p">{{v.pp1}}
                                    <span>￥20</span><span class="sp">抢</span>
                                </p>
                            </div>

                            <div class="list">
                                <p class="img1"> <img src=" {{v.image}}" alt=""> </p>
                                <p class="h21">{{v.hh}}</p>
                                <p class="p">{{v.pp1}}
                                    <span>￥20</span><span class="sp">抢</span>
                                </p>


                            </div>
                        </div>
                        {{/each}}
                    </script>





                </div>
                <div class="swiper-slide dapai   box">

                </div>
                <div class="swiper-slide   xiawu  box">

                </div>
                <div class="swiper-slide  shang box">

                </div>
                <div class="swiper-slide  shui  box">

                </div>
                <div class="swiper-slide xian   box">

                </div>
                <!-- <div class="swiper-slide">

                </div> -->
            </div>
        </div>
    </main>




























    <script src="../assets/jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/index.js"></script>
    <script src="../assets/swiper/js/swiper.min.js"></script>
    <script src="../assets/artTemplate/template-web.js"></script>

    <script src=".././font/iconfont.js"></script>
    <script>
        jQuery(function($) {

            var swiper1 = new Swiper('.tab-nav', {
                slidesPerView: 4,
                freeMode: true,
                freeModeMomentumRatio: 0.5,
            })

            swiper1.container.on("click", function() {

                var slide = swiper1.slides.eq(swiper1.clickedIndex);

                console.log(slide);
                $('.active').removeClass("active");
                slide.addClass("active");




                var swiperHalf = swiper1.width / 2;
                var maxTranslate = swiper1.maxTranslate();
                var maxWidth = -maxTranslate + swiperHalf;

                var slideLeft = slide[0].offsetLeft;
                var slideWidth = slide[0].clientWidth;
                var slideCenter = slideLeft + slideWidth / 2;
                // 被点击slide的中心点

                swiper1.setWrapperTransition(300)

                if (slideCenter < swiperHalf) {
                    swiper1.setWrapperTranslate(0);
                } else if (slideCenter > maxWidth) {
                    swiper1.setWrapperTranslate(maxTranslate);
                } else {
                    var translate = slideCenter - swiperHalf;
                    swiper1.setWrapperTranslate(-translate);
                }

                swiper2.slideTo(swiper1.clickedIndex);
            })

            var swiper2 = new Swiper('.tab-cont', {
                onSlideChangeStart: function(swiper) {
                    swiper1.clickedIndex = swiper.activeIndex;
                    swiper1.slides.eq(swiper.activeIndex).trigger('click');
                }
            })

        })
    </script>
    <script>
        $.ajax({
            type: "get",
            url: "../json/tejia.json",
            dataType: "json",
            success: function(data) {
                var arr = template("template", {
                    str: data,
                });
                $(".box").html(arr)
            }
        })
    </script>
</body>

</html>